<template>
	<div>
		<el-dialog title="调拨详情" width="1000px" @open="open" class="icon-dialog" :visible.sync="show" :before-close="closeForm" append-to-body>
      <el-button type="primary" size="small" icon="el-icon-check" @click="saveTransfer()" :disabled="header.status === 'audit' || header.status === 'save'">&nbsp;保&nbsp;存&nbsp;</el-button>
      <el-button type="primary" size="small" icon="el-icon-s-promotion"  @click="audit()" :disabled="header.status === 'audit' || header.status === 'unAudit'">&nbsp;审&nbsp;核&nbsp;</el-button>
      <el-button type="primary" size="small" icon="el-icon-s-sort"  @click="unAudit()" :disabled="header.status === 'save' || header.status === 'unAudit'">&nbsp;反&nbsp;审&nbsp;</el-button>
      <el-form>
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('field.Transfer_billNo') + ':'" >{{header.billNo}} </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('field.Transfer_createDate')+ ':'">{{header.createDate}} </el-form-item>
          </el-col>

        </el-row>
        <el-row>
<!--          <el-col :span="6">-->
<!--            <el-form-item :label="$t('field.Transfer_stocker') + ':'">{{header.stocker}} </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item :label="$t('field.Transfer_workShop') + ':'">{{header.workShop}} </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="8">
            <el-form-item :label="$t('field.Transfer_note')+ ':'">{{header.note}} </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-button style="margin-left: 20px; margin-top: -10px" v-if="header.status === 'unAudit'" type="success" @click="openShow" size="small">新增物料</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="transferList" height="calc(200vh - 250px)">
        <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
        <el-table-column label="物料编码" width="120" prop="materialNo"></el-table-column>
        <el-table-column label="物料名称" width="120" prop="materialName"></el-table-column>
        <el-table-column label="物料规格" width="120" prop="specification"></el-table-column>
        <el-table-column label="单位" width="120" prop="unit"></el-table-column>
        <el-table-column label="批号" width="80" prop="flot"></el-table-column>
        <el-table-column label="数量" width="80" prop="fqty"></el-table-column>
        <el-table-column label="生产日期" width="120" prop="produceDate"></el-table-column>
        <el-table-column label="有效期至" width="120" prop="expiryDate"></el-table-column>
        <el-table-column label="调出仓库" width="100" prop="srcStockNo">
          <template slot-scope="scope">
            <el-select  v-model="scope.row.srcStockNo" clearable  placeholder="请选择仓库"  size="small" :disabled="header.status === 'audit' || header.status === 'save'">
              <el-option v-for="item in stockList" :key="item.stockNo" :label="item.stockName" :value="item.stockNo"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="调入仓库" width="100" prop="destStockNo">
          <template slot-scope="scope">
            <el-select  v-model="scope.row.destStockNo" clearable  placeholder="请选择仓库"  size="small" :disabled="header.status === 'audit' || header.status === 'save'">
              <el-option v-for="item in stockList" :key="item.stockNo" :label="item.stockName" :value="item.stockNo"></el-option>
            </el-select>
          </template>
        </el-table-column>

      </el-table>
      <el-dialog title="添加物料"  :visible.sync="materialShow" center width="1000px" top="70px" :append-to-body="true" :close-on-press-escape="true" :close-on-click-modal="false">
        <el-row>
          <el-col :span="9" class="col">
            <span style="margin-right: 5px">物料:</span>
            <el-select style="width: 225px" filterable remote size="small" :remote-method="e => getMaterialStockList(e)" v-model="materialNo" clearable class="material" placeholder="请输入5位以上的物料编码/物料名称">
              <el-option v-for="item in this.materialList" :key="item.fnumber" :label="item.fnumber + '：' + item.fname + ' ' + item.fspecification" :value="item.fnumber" />
            </el-select>
          </el-col>
          <el-col :span="6" class="col">
            <span style="margin-left: -15px;margin-right: 10px">批次:</span>
            <el-input style="width: 180px; margin-left: -10px" v-model="batchNo" size="small" clearable></el-input>
          </el-col>
          <el-col :span="3">
            <el-button size="small" @click="getMaterial()">搜索</el-button>
          </el-col>
        </el-row>
        <el-table :data="dataList" v-loading="materialListLoading" class="detail" height="60vh" @selection-change="handleSelectionChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="#" width="40" align="center" type="index"></el-table-column>
          <el-table-column prop="fmaterialNumber" label="物料编码"></el-table-column>
          <el-table-column prop="fmaterialName" label="物料名称"></el-table-column>
          <el-table-column prop="fspecification" label="物料规格"></el-table-column>
          <el-table-column prop="fstockName" label="仓库"></el-table-column>
          <el-table-column prop="flot" label="批次"></el-table-column>
          <el-table-column prop="fqty" label="重量" align="right" width="60"></el-table-column>
        </el-table>
        <div style="display: flex; justify-content: center; margin-top: 10px">
          <el-button type="success" @click="dataToMaterial">添加</el-button>
          <el-button @click="materialShow = false" type="info">关闭</el-button>
        </div>
      </el-dialog>
		</el-dialog>
	</div>
</template>
<script>
import {detail, saveTransfer, audit, unAudit, updateTransfer, getMaterialFromStock} from '@/api/app/transfer'
import {list} from "@/api/app/stocklist";
import {getMaterialByKey} from "@/api/app/material";
export default {
	name:'transferdetail',
	props: {
		show: {
			type: Boolean,
			default: true
		},
		size: {
			type: String,
			default: 'mini'
		},
		info: {
			type: Object,
		},
	},
	data() {
		return {
			header:{},
      dataList:[],
      stockList:[],
      materialShow:false,
      materialList:[],
      transferList:[],//调拨集合
      materialNo:'',
      batchNo:'',
      multipleSelection: [],
      materialListLoading: false
		}
	},
	watch:{
		show(val){
			if(val){
			}
		}
	},
	methods: {
    //添加物料到调拨列表
    dataToMaterial() {
      if (this.multipleSelection.length === 0) {
        ElMessage.error('请选择物料！')
        return
      }
      this.materialShow = false
      this.multipleSelection.forEach(value => {
        this.transferList.push({
          materialNo:value.fmaterialNumber,
          materialName:value.fmaterialName,
          specification:value.fspecification,
          batchNo:value.flot,
          unit:value.funit,
          fqty:value.fqty,
          srcStockNo:value.fstockNumber,
          stockName:value.fstockName,
          produceDate:value.fproduceDate,
          expiryDate:value.fexpiryDate,
          ownerName:value.FOwnerName
        })
      })

    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /**
     * 获取物料信息
     * @param val
     */
    getMaterialStockList(val){
      if (val.length < 5) {
        this.materialList = []
        return
      }
      if (!val) {
        this.materialList = []
        return
      }
      try {
        getMaterialByKey({key:val}).then(res => {
          this.materialList = res.data.data.data
        })

      } finally {

      }
    },
    /**
     *根据物料编码和批次查询及时库存物料
     */
    getMaterial(){
      this.materialListLoading = true
      try {
        getMaterialFromStock({
          materialNo: this.materialNo,
          batchNo: this.batchNo,
          // stockNo: this.form.stockNo,
          // locationNo: this.form.locationNo
        }).then(res => {

          this.dataList = res.dataList
          console.log(this.dataList)
        })
        if (this.dataList.length === 0) {
          ElMessage.warning('未查询到符合条件的物料!')
        }
      } finally {
        this.materialListLoading = false
      }
    },
    //打开新增物料选项
    openShow() {
      this.materialShow = true
      this.materialList = []
      this.materialNo ='',
      this.batchNo = '',
      this.dataList = []
    },
    getStock(){
      list().then(res => {
        this.stockList = res.data
      })

    },
    unAudit(){
      unAudit({billNo:this.header.billNo}).then(res => {
        if (res.data == true){
          this.$message.success("反审成功")
          this.open()
          this.reload()
        } else {
          this.$message.warning("反审失败")
          this.open()
        }
      })
    },
    audit(){
      audit({billNo:this.header.billNo}).then(res =>{
        console.log(res)
        if (res.data == true){
          this.$message.success("审核成功")
          this.open()
          this.reload()
        } else {
          this.$message.warning(data.msg)
          this.open()
        }
      })
    },
    //保存调拨单
    saveTransfer(){
      updateTransfer({data : this.transferList, remark : this.header.remark,billNo : this.header.billNo}).then(res => {
        console.log(res)
        if(res.data.res == true){
          this.$message.success("保存成功")
          this.open()
          this.reload()
        } else {
          this.$message.warning(data.msg)
          this.open()
        }
      })
    },
		open(){
			detail(this.info).then(res => {
				this.header = res.data.header
        this.transferList = res.data.dataList
			})
		},
		closeForm(){
			this.$emit('update:show', false)
		}
	},
  mounted() {
    this.getStock()
  }
}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss';
</style>
